<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
<!-- 组织机构 -->
<div class="panel panel-default">
  <!-- 面板头-->
  <div class="panel-heading">
  	<i class="glyphicon glyphicon-th"></i>用户管理
  </div>
    <!-- 面板体-->
  <div class="panel-body">
	   <form class="form-inline" role="form" style="float:left;">
		  <div class="form-group has-feedback">
		    <div class="input-group">
		      <div class="input-group-addon">查询条件</div>
		      <input class="form-control has-success" type="text" placeholder="请输入查询条件">
		    </div>
		  </div>
		  <button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
	    </form>
	    <form method="post">
		<button id="batchDelete" type="button" class="btn btn-danger" style="float:right;margin-left:10px;" ><i class=" glyphicon glyphicon-remove" ></i>批量删除</button>
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" style="float:right;margin-left:10px;">新增</button>
		
		
		<br>
	 	<hr style="clear:both;">
	 	    <!-- 响应式表格 -->
	  		<div class="table-responsive">
				<table class=".table table-striped table-bordered table-hover" style="margin: 20px auto;width:100%">
	            		<thead>
	            		   <tr >
	            		   		<th>
	            		   			<div class="checkbox">
							<label>
								<input type="checkbox">全选
							</label>
						</div>
	            		   		</th>	            		   		
	            		   		<th>用户编号</th>
	            		   		<th>用户档案</th>
	            		   		<th>登记薄</th>
	            		   		<th>用户名</th>
	            		   		<th>用户年龄</th>
	            		   		<th>用户电话</th>
	            		   		<th width="120px">操作</th>
	            		  </tr>
	            		</thead>
	            		<tbody>
	            			<tr>
	            				<td><input type='checkbox' name='checkbox'/></td>
	            				<td>user001</td>
	            				<td>dangan002</td>
	            				<td>登记薄002</td>
	            				<td>郭让</td>
	            				<td>18</td>
	            				<td>110</td>
	            				<td>
	            				<button type='button' class='btn btn-warning' name='delete_btn'>删除</button>
	            				<button type='button' class='btn btn-primary' name='update_btn'>修改</button>
	            				<button type='button' class='btn btn-primary' name='update_btn'>启用</button>
	            				<button type='button' class='btn btn-primary' name='update_btn'>禁用</button>
	            				<button type='button' class='btn btn-primary' name='update_btn'>导出档案</button>
	            				</td>
	            			</tr>
	            		</tbody>
	            		  
	    			</table>
	    	</div>
	    	
	    </form>
  </div>
</div>
<!-- 模态框begin -->
		<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="exampleModalLabel">新增角色</h4>
		      </div>
		      <div class="modal-body">
		        <form id="role_add_form">
		          <div class="form-group">
		            <label for="message-text" class="control-label">角色名字:</label>
		            <input type="text" name="rolename"/>
		          </div>
		        </form>
		        
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary" id="add_role_btn">提交</button>
		      </div>
		    </div>
		  </div>
		</div>
<!-- 模态框end -->
<script type="text/javascript"  src="${pageContext.request.contextPath}/js/jquery-1.12.3.min.js"></script>
<script type="text/javascript"  src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript">
	//页面加载获取全部数据
	$(function(){
		show();
		add();
		batchDelete();
	});
	
	//展示全部 Resutful
	function show() {
		$.ajax({
			url:"roles",
			dataType:"json",
			type:"get",
			async:true,
			success:function(data){
				var str="";				
				for (var i = 0; i < data.length; i++) {
					str+="<tr>";
					str+="<td><input type='checkbox' name='checkbox'/></td>";
					str+="<td>"+data[i].id+"</td>";
					str+="<td>"+data[i].rolename+"</td>";
					str+="<td>";
					str+="<button type='button' class='btn btn-default' name='delete_btn'>删除</button><button type='button' class='btn btn-default' name='update_btn'>修改</button>";
					str+="</td>";
					str+="</tr>";
				}
				$("tbody").html(str);
				update();
				deleteRole();
			}
		});
	}

	//新增 Resutful
	function add() {
		$("#add_role_btn").click(function(){
			//alert("新增！");
			$.ajax({
				url:"roles",
				type:"post",
				async:true,
				data:$("#role_add_form").serialize(),
				success:function(data){
					alert(data);
					$("#exampleModal").modal("hide");
					$(":input[name='rolename']").val("");
					show();
					
				}
			});
			
			
		});
	}

	//修改
	function update() {
		$(":button[name='update_btn']").click(function(){
			var id=$(this).parents("tr").children("td:eq(1)").text();
			$.ajax({
				url:"updateRole",
				type:"post",
				async:true,
				data:{"id":id},
				dataType:"json",
				success:function(data){
					newRoleName = prompt("请输入角色新的姓名", data.rolename);
					data.rolename=newRoleName;
					
					doUpdate(data);
				}
			});
		});
	}
	
	//执行修改 Resutful
	 function doUpdate(data) {

		$.ajax({
			url:"roles",
			type:"post",
			async:true,
			data:{"id":data.id,"rolename":data.rolename,"_method":"put"},
			dataType:"json",
			success:function(temp){
				alert(temp);
				show();
			}
		}); 
	}
	
	//删除 Resutful
	function deleteRole() {
		$(":button[name='delete_btn']").click(function(){
			var id=$(this).parents("tr").children("td:eq(1)").text();
			$.ajax({
				url:"roles",
				data:{"id":id,"_method":"delete"},
				type:"post",
				success:function(data){
					alert(data);
					show();
				}
			});
		});
	}
	
	//批量删除
	function batchDelete() {
		$("#batchDelete").click(function() {
			 var ids=[];
			  $(":checkbox[name=checkbox]:checked").each(function(){
				  ids.push($(this).parents("tr").children("td:eq(1)").text()); 
			  });
			  $.ajax({
				  url:"batchDelete",
				  type:"post",
				  data:{"ids":ids.join(",")},
				  success:function(data){
					alert(data); 
					show();
				  }
			  });
		});
	}
	
</script>